<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回按钮功能
const goBack = () => {
  router.back()
}

// 健康数据
const healthData = ref({
  keyMetrics: [
    { name: '血压', value: '120/80', unit: 'mmHg', status: '正常', icon: '❤️' },
    { name: '心率', value: '72', unit: 'bpm', status: '正常', icon: '💓' },
    { name: '血糖', value: '5.2', unit: 'mmol/L', status: '正常', icon: '🩸' },
    { name: '体重', value: '70', unit: 'kg', status: '正常', icon: '⚖️' },
    { name: 'BMI', value: '22.9', unit: '', status: '正常', icon: '📊' },
    { name: '步数', value: '8,542', unit: '步', status: '良好', icon: '🚶' }
  ],
  monthlyData: {
    '1月': {
      weight: 70.2,
      bloodPressure: { systolic: 121, diastolic: 81 },
      heartRate: 73,
      bloodSugar: 5.3
    },
    '2月': {
      weight: 70.0,
      bloodPressure: { systolic: 119, diastolic: 79 },
      heartRate: 72,
      bloodSugar: 5.2
    },
    '3月': {
      weight: 69.8,
      bloodPressure: { systolic: 118, diastolic: 78 },
      heartRate: 71,
      bloodSugar: 5.1
    },
    '4月': {
      weight: 69.5,
      bloodPressure: { systolic: 119, diastolic: 80 },
      heartRate: 72,
      bloodSugar: 5.2
    },
    '5月': {
      weight: 69.7,
      bloodPressure: { systolic: 120, diastolic: 79 },
      heartRate: 71,
      bloodSugar: 5.2
    },
    '6月': {
      weight: 70.0,
      bloodPressure: { systolic: 120, diastolic: 80 },
      heartRate: 72,
      bloodSugar: 5.2
    }
  },
  healthRecommendations: [
    '继续保持良好的血压和心率水平',
    '每周进行至少150分钟中等强度有氧运动',
    '保持均衡饮食，控制盐和糖的摄入量',
    '定期监测血糖和体重变化',
    '保证充足睡眠，每天7-8小时',
    '减少久坐时间，增加日常活动量'
  ],
  upcomingCheckups: [
    { id: 1, type: '年度体检', date: '2024-06-15', doctor: '张医生', department: '全科' },
    { id: 2, type: '牙科检查', date: '2024-04-10', doctor: '李医生', department: '牙科' }
  ]
})

// 获取健康状态的颜色
const getStatusColor = (status) => {
  switch(status) {
    case '正常':
      return '#28a745'
    case '良好':
      return '#17a2b8'
    case '异常':
      return '#dc3545'
    case '偏高':
      return '#ffc107'
    case '偏低':
      return '#007bff'
    default:
      return '#6c757d'
  }
}
</script>

<template>
  <div class="health-data-container">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">
      ← 返回
    </button>

    <!-- 页面标题 -->
    <h1 class="page-title">健康数据</h1>

    <!-- 关键健康指标卡片 -->
    <div class="health-card">
      <h2 class="card-title">关键健康指标</h2>
      <div class="metrics-grid">
        <div 
          v-for="metric in healthData.keyMetrics" 
          :key="metric.name"
          class="metric-card"
        >
          <div class="metric-icon">{{ metric.icon }}</div>
          <div class="metric-info">
            <div class="metric-name">{{ metric.name }}</div>
            <div class="metric-value">
              {{ metric.value }}
              <span v-if="metric.unit">{{ metric.unit }}</span>
            </div>
            <div 
              class="metric-status" 
              :style="{ color: getStatusColor(metric.status) }"
            >
              {{ metric.status }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 健康数据趋势图表卡片 -->
    <div class="health-card">
      <h2 class="card-title">健康数据趋势</h2>
      <div class="trend-chart">
        <!-- 体重趋势图表 -->
        <div class="chart-section">
          <h3>体重趋势 (kg)</h3>
          <div class="chart-container">
            <div class="chart-labels">
              <div v-for="(data, month) in healthData.monthlyData" :key="month" class="chart-label">
                {{ month }}
              </div>
            </div>
            <div class="chart-bars">
              <div 
                v-for="(data, month) in healthData.monthlyData" 
                :key="month"
                class="chart-bar-container"
              >
                <div 
                  class="chart-bar weight"
                  :style="{ height: (data.weight * 3) + 'px' }"
                ></div>
                <div class="chart-value">{{ data.weight.toFixed(1) }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 血压趋势图表 -->
        <div class="chart-section">
          <h3>血压趋势 (mmHg)</h3>
          <div class="chart-container">
            <div class="chart-labels">
              <div v-for="(data, month) in healthData.monthlyData" :key="month" class="chart-label">
                {{ month }}
              </div>
            </div>
            <div class="chart-bars">
              <div 
                v-for="(data, month) in healthData.monthlyData" 
                :key="month"
                class="chart-bar-container"
              >
                <div class="bp-bars">
                  <div 
                    class="chart-bar systolic"
                    :style="{ height: data.bloodPressure.systolic + 'px' }"
                  ></div>
                  <div 
                    class="chart-bar diastolic"
                    :style="{ height: data.bloodPressure.diastolic + 'px' }"
                  ></div>
                </div>
                <div class="chart-value">
                  {{ data.bloodPressure.systolic }}/{{ data.bloodPressure.diastolic }}
                </div>
              </div>
            </div>
            <div class="bp-legend">
              <div class="legend-item">
                <div class="legend-color systolic"></div>
                <span>收缩压</span>
              </div>
              <div class="legend-item">
                <div class="legend-color diastolic"></div>
                <span>舒张压</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 心率和血糖趋势图表 -->
        <div class="chart-section">
          <h3>心率和血糖趋势</h3>
          <div class="chart-container">
            <div class="chart-labels">
              <div v-for="(data, month) in healthData.monthlyData" :key="month" class="chart-label">
                {{ month }}
              </div>
            </div>
            <div class="chart-bars">
              <div 
                v-for="(data, month) in healthData.monthlyData" 
                :key="month"
                class="chart-bar-container"
              >
                <div class="dual-bars">
                  <div 
                    class="chart-bar heartRate"
                    :style="{ height: data.heartRate * 2 + 'px' }"
                  ></div>
                  <div 
                    class="chart-bar bloodSugar"
                    :style="{ height: data.bloodSugar * 30 + 'px' }"
                  ></div>
                </div>
                <div class="chart-value">
                  <span>心率: {{ data.heartRate }} bpm</span>
                  <span>血糖: {{ data.bloodSugar.toFixed(1) }} mmol/L</span>
                </div>
              </div>
            </div>
            <div class="dual-legend">
              <div class="legend-item">
                <div class="legend-color heartRate"></div>
                <span>心率</span>
              </div>
              <div class="legend-item">
                <div class="legend-color bloodSugar"></div>
                <span>血糖</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 健康建议卡片 -->
    <div class="health-card">
      <h2 class="card-title">健康建议</h2>
      <div class="recommendations">
        <ul>
          <li v-for="(recommendation, index) in healthData.healthRecommendations" :key="index">
            {{ recommendation }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 预约检查卡片 -->
    <div class="health-card">
      <h2 class="card-title">即将到来的检查</h2>
      <div class="upcoming-checkups">
        <div 
          v-for="checkup in healthData.upcomingCheckups" 
          :key="checkup.id"
          class="checkup-item"
        >
          <div class="checkup-date">{{ checkup.date }}</div>
          <div class="checkup-info">
            <h3 class="checkup-type">{{ checkup.type }}</h3>
            <div class="checkup-details">
              <span>医生: {{ checkup.doctor }}</span>
              <span>科室: {{ checkup.department }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.health-data-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.back-button {
  background: none;
  border: none;
  font-size: 16px;
  color: #007bff;
  cursor: pointer;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.back-button:hover {
  text-decoration: underline;
}

.page-title {
  text-align: center;
  color: #2c3e50;
  margin: 20px 0 30px;
  font-size: 28px;
}

.health-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.card-title {
  color: #34495e;
  margin-bottom: 20px;
  font-size: 20px;
  border-bottom: 2px solid #e1e8ed;
  padding-bottom: 10px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.metric-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.metric-icon {
  font-size: 24px;
}

.metric-info {
  flex: 1;
}

.metric-name {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
}

.metric-value {
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}

.metric-status {
  font-size: 12px;
  font-weight: 500;
}

.trend-chart {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.chart-section {
  margin-bottom: 20px;
}

.chart-section h3 {
  color: #34495e;
  margin-bottom: 15px;
  font-size: 16px;
}

.chart-container {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.chart-labels {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  font-size: 14px;
  color: #6c757d;
}

.chart-label {
  text-align: center;
  min-width: 50px;
}

.chart-bars {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 200px;
  margin-bottom: 10px;
}

.chart-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}

.chart-bar {
  width: 30px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.chart-bar.weight {
  background-color: #3498db;
}

.chart-bar.systolic {
  background-color: #e74c3c;
  margin-bottom: 5px;
}

.chart-bar.diastolic {
  background-color: #95a5a6;
}

.chart-bar.heartRate {
  background-color: #e91e63;
  margin-bottom: 5px;
}

.chart-bar.bloodSugar {
  background-color: #8bc34a;
}

.chart-value {
  font-size: 12px;
  color: #6c757d;
  text-align: center;
  margin-top: 5px;
}

.bp-bars, .dual-bars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.bp-legend, .dual-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #6c757d;
}

.legend-color {
  width: 15px;
  height: 15px;
  border-radius: 3px;
}

.legend-color.systolic {
  background-color: #e74c3c;
}

.legend-color.diastolic {
  background-color: #95a5a6;
}

.legend-color.heartRate {
  background-color: #e91e63;
}

.legend-color.bloodSugar {
  background-color: #8bc34a;
}

.recommendations ul {
  padding-left: 20px;
  line-height: 1.8;
}

.recommendations li {
  color: #2c3e50;
  margin-bottom: 10px;
}

.recommendations li:last-child {
  margin-bottom: 0;
}

.upcoming-checkups {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.checkup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.checkup-date {
  font-weight: bold;
  color: #007bff;
  min-width: 100px;
}

.checkup-info {
  flex: 1;
  margin-left: 20px;
}

.checkup-type {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 5px;
}

.checkup-details {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #6c757d;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .health-data-container {
    padding: 15px;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .card-title {
    font-size: 18px;
  }
  
  .chart-labels {
    font-size: 12px;
  }
  
  .chart-value {
    font-size: 11px;
  }
  
  .checkup-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .checkup-info {
    margin-left: 0;
    width: 100%;
  }
  
  .checkup-details {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .bp-legend, .dual-legend {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}
</style>